<script setup>
import {onMounted, reactive, ref} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {Button} from 'vant';
import axios from "@/utils/axios.js";


const route = useRoute();
const router = useRouter();
const active = ref(1); // 步骤条激活状态
const loading = ref(false); // 数据加载状态
const goodsList = ref([
    {
        orderId: 0,
        productId: 0,
        productName: '',
        listPrice: 0,
        image1: '',
        image2: '',
        image3: '',
        shortDesc: '',
        longDesc: '',
        listedAt: '',
        stock: 0,
        collects: 0,
        sales: 0,
        discount: 0,
        actualPrice: 0,
    }
]);

// 分页参数
const pages = reactive({
    page: 1,
    limit: 10,
    hasMore: true // 是否还有更多数据
});

// 初始化加载订单商品数据
const init = () => {
    const user = JSON.parse(sessionStorage.getItem("user"))
    console.log("66666666666666666" + user)
    console.log(user.userId + "88888888888888888")
    if (!user) {
        router.push('/login');
    }
    axios.get(`/api/getByUserId/${user.userId}`)
        .then(res => {
            console.log(res.data)
            goodsList.value = res.data;
            console.log(goodsList.value[0])
        })
}

// 查看商品详情（可选：点击单元格进入详情页）
const goToGoodsDetail = (productId) => {
    router.push({
        name: 'goodsDetail', // 对应商品详情页路由name
        params: {productId}
    });
};

// 页面挂载时加载初始数据
onMounted(() => {
    init();
});

const goBack = () => {
    router.go(-1);
}
const goToProductDetail = (goods) => {
    router.push({
        name: 'productsDetail', // 对应详情页路由的name
        params: {productId: goods.orderId} // 传递商品id（和路由配置的:id对应）
    });
};
const orderDetail = (goods) => {
    event.stopPropagation(); // 避免进入详情页(阻止冒泡事件)
    router.push({
        name: 'orderDetail',
        params: {orderId: goods.orderId}
    });

}
</script>

<template>
    <div class="order-goods-page">
        <div class="goods-list-container">
            <van-nav-bar
                    title="全部订单"
                    left-text="返回"
                    left-arrow
                    @click-left="goBack"
            />
            <!-- 加载中状态 -->
            <div class="loading-container" v-if="loading && goodsList.length === 0">
                <van-loading color="#FF8FA3" size="30"/>
                <p class="loading-text">正在加载订单商品...</p>
            </div>

            <!-- 空状态：无商品数据 -->
            <van-empty
                    v-else-if="goodsList.length === 0 && !loading"
                    description="暂无订单商品"
                    class="empty-container"
            >
                <template #image>
                    <img src="https://picsum.photos/200/200?grayscale" alt="暂无商品" class="empty-img"/>
                </template>
                <Button class="go-home-btn" @click="$router.push('/store')">
                    去首页购物
                </Button>
            </van-empty>

            <!-- 商品列表：单元格循环 -->
            <div
                    class="goods-item-wrapper"
                    v-for="goods in goodsList"
                    :key="goods.productId"
            >
                <!-- 商品卡片：展示goodsList数据 -->
                <van-card
                        class="goods-card"
                        :num="goods.sales || 1"
                        :price="goods.actualPrice"
                        :desc="goods.shortDesc || '优质商品'"
                        :title="goods.productName || '未知商品'"
                        :thumb="goods.image1"
                        @click="goToProductDetail(goods)"
                >
                    <!-- 添加商品其他标签 -->
                    <template #tags>
                        <van-tag plain type="primary">坏了不退,退换不包</van-tag>
                    </template>
                    <template #footer>
                        <van-button
                                round
                                type="primary"
                                style="width: 80px; height: 32px; font-size: 12px;"
                                @click="orderDetail(goods)"
                        >
                            查看物流
                        </van-button>
                    </template>
                </van-card>
            </div>

            <!-- 加载更多：数据未加载完时显示 -->
            <div class="load-more" v-if="pages.hasMore && !loading && goodsList.length > 0">
                <Button @click="init()" class="load-btn">加载更多</Button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.order-goods-page {
    background-color: #FFF9FB;
    min-height: 100vh;
    padding: 15px;
    padding-bottom: 60px;
}

/* 步骤条样式 */
.order-steps {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(255, 143, 163, 0.1);
}

.horizontal-steps {
    --van-step-icon-size: 18px;
    --van-step-title-font-size: 14px;
}

/* 物流状态样式 */
.logistics-status {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(255, 143, 163, 0.1);
}

.logistics-status .van-step__title {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.logistics-status .van-step__description {
    font-size: 12px;
    color: #999;
}

/* 商品列表容器 */
.goods-list-container {
    gap: 12px;
    display: flex;
    flex-direction: column;
}

/* 加载中样式 */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
}

.loading-text {
    margin-top: 12px;
    color: #999;
    font-size: 14px;
}

/* 空状态样式 */
.empty-container {
    padding: 60px 0;
    text-align: center;
}

.empty-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 15px;
    opacity: 0.6;
}

.go-home-btn {
    background-color: #FF8FA3;
    color: #fff;
    border-radius: 20px;
    margin-top: 10px;
}

/* 商品单元格样式 */
.goods-item-wrapper {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(255, 143, 163, 0.1);
}

.swipe-cell {
    --van-swipe-cell-right-width: 60px; /* 右侧删除按钮宽度 */
}

.goods-card {
    --van-card-background: #fff;
    --van-card-border: none;
    --van-card-padding: 12px;
    --van-card-price-color: #E63946;
    --van-card-title-color: #333;
    --van-card-desc-color: #999;
}

/* 删除按钮样式 */
.delete-btn {
    height: 100%;
    background-color: #E63946;
    color: #fff;
    font-size: 14px;
}

/* 加载更多按钮 */
.load-more {
    padding: 20px 0;
    text-align: center;
}

.load-btn {
    background-color: #FF8FA3;
    color: #fff;
    border-radius: 20px;
    padding: 8px 24px;
}
</style>